<template>
	<el-dialog modal-append-to-body append-to-body :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="visible">
		<el-form ref="dataForm" :model="search" inline label-width="100px">
			<el-form-item prop="classifyId" label="课件分类:">
				<el-select v-model="search.classifyId" clearable placeholder="请选择">
					<el-option :label="searchSelLeftTree.name" :value="searchSelLeftTree.id">
						<el-tree
							:data="leftTreeData"
							:props="{
								children: 'children',
								label: 'name',
							}"
							accordion
							highlight-current
							@node-click="handleSelectionSearchChange"
						></el-tree>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="coursewareName" label="课件名称:">
				<el-input v-model="search.coursewareName" placeholder="请输入课程名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getCourseWarePage()">查询</el-button>
			</el-form-item>
		</el-form>
		<!--课件-->
		<el-table ref="el-table" row-key="id" :data="tableData">
			<el-table-column width="55">
				<template #header>
					<el-checkbox v-model="isCheckedAll"></el-checkbox>
				</template>
				<template #default="{ row }">
					<el-checkbox :value="checkedIds.includes(row.id)" @change="onCheckChange(row)"></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column prop="coursewareName" label="课件名称"></el-table-column>
			<el-table-column prop="coursewareType" label="课件类型" :formatter="coursewareTypeFmt">
				<!-- <template slot-scope="scope">
						{{ $getDictLabel("courseware_type", scope.row.coursewareType) }}
					</template> -->
			</el-table-column>
			<el-table-column prop="studyTime" label="学习时长">
				<template #default="{row}">{{ row.studyTime }} 分钟</template>
			</el-table-column>
		</el-table>
		<br />
		<pagination :total="total" :current-page="current" :page-size="size" @refreshData="getCourseWarePage"></pagination>
		<br />
		<div style="text-align: right; margin: 0">
			<el-button type="default" @click="onClose">取消</el-button>
			<el-button type="primary" @click="onConfirm">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import FortressPagination from "@/components/fortress-pagination.vue"
import { enumList } from "@/api/public.api.js"
import { studycoursewarePage } from "@/api/study/course/studycourseware.js"

let callback = null

export default {
	props: {
		leftTreeData: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			visible: false,
			tableData: [],
			total: 0,
			current: 1,
			size: 10,
			CoursewareTypeList: [],
			search: {
				classifyId: "",
				coursewareName: "",
			},
			searchSelLeftTree: {
				id: "",
				name: "",
			},
			checked: [],
			currentChecked: [],
		}
	},
	computed: {
		checkedIds() {
			return this.checked.map(item => item.id)
		},
		isCheckedAll: {
			get() {
				if (this.tableData.length == 0) {
					return false
				}
				return this.tableData.every(item => this.checkedIds.includes(item.id))
			},
			set(value) {
				if (value) {
					const list = this.tableData.filter(item => !this.checkedIds.includes(item.id))
					this.checked = [...this.checked, ...list]
				} else {
					this.checked = this.checked.filter(item => !this.tableData.some(row => row.id == item.id))
				}
			},
		},
	},
	methods: {
		show(checked, cb) {
			this.currentChecked = checked || []
			if (checked.length == 0) {
				this.checked = []
			} else {
				this.checked = checked
			}
			if (Array.isArray(checked)) {
				this.checked = this.checked.filter(item => item != undefined && item != null && item != "")
			} else {
				this.checked = []
			}
			this.visible = true

			this.current = 1
			this.queryEnumList()
			this.getCourseWarePage()
			callback = cb
		},

		onClose() {
			if (this.currentChecked.length != this.checked.length) {
				this.checked = this.currentChecked
			}
			this.visible = false
		},
		onConfirm() {
			if (this.checked.length == 0) {
				this.$message.error("请选择课件")
				return
			}
			if (callback) {
				callback(this.checked)
			}
			this.visible = false
			// this.onClose()
		},

		onCheckChange(row) {
			if (this.checkedIds.includes(row.id)) {
				this.checked = this.checked.filter(item => item.id != row.id)
			} else {
				this.checked.push(row)
			}
		},

		coursewareTypeFmt(row) {
			let name = ""
			if (this.CoursewareTypeList) {
				this.CoursewareTypeList.forEach(item => {
					if (item.code == row.coursewareType) {
						name = item.name
					}
				})
			}
			return name
		},
		queryEnumList() {
			this.CoursewareTypeList = []
			enumList("CoursewareType", "").then(resp => {
				if (resp.code == 0) {
					this.CoursewareTypeList = resp.data
				}
			})
		},
		handleSelectionSearchChange(data) {
			this.searchSelLeftTree.id = data.id
			this.searchSelLeftTree.name = data.name
			this.search.classifyId = data.id
		},

		getCourseWarePage(page) {
			if (page) {
				this.current = page.current ? page.current : this.current
				this.size = page.size ? page.size : this.size
			}
			this.search.current = this.current
			this.search.size = this.size
			studycoursewarePage(this.search).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu = this.total % this.size == 0 ? parseInt(this.total / this.size) : parseInt(this.total / this.size + 1)
					if (cu > 0 && this.current > cu) {
						this.getCourseWarePage({ current: cu })
					}
				}
			})
		},
	},
	components: {
		pagination: FortressPagination,
	},
}
</script>

<style lang="scss" scoped></style>
